  <style type="text/css">
.download_files {
    width: 400px;
    min-height: 120px;
    max-height: 300px;
    _height: 120px;
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
    outline: 0;
    border: 1px solid #a0b3d6;
    font-size: 12px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    _overflow-y: visible;
}
        </style>



<% content_for :head do %>
  <%= stylesheet_link_tag('jquery.fileupload-ui') %>
	<%= stylesheet_link_tag "jcrop" %>
<% end %>

<% content_for :scripts do%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<%= javascript_include_tag 'jquery.fileupload', 'jquery.fileupload-ui', 'jcrop.min' %>
	
<script type="text/javascript" charset="utf-8">	
	function cropping_arrived() {
	  jQuery('#cropbox').Jcrop({
	  	onChange: update_crop,
	  	onSelect: update_crop,
			aspectRatio: 1,
			minSize: [<%= Upload::PREVIEW_WIDTH %>,<%= Upload::PREVIEW_HEIGHT %>]
		});
	};
	$(function () {
	    $('.upload').fileUploadUI({
	        uploadTable: $('.upload_files'),
	        downloadTable: $('.download_files'),
	        buildUploadRow: function (files, index) {
	            var file = files[index];
	            return $('<tr><td>' + file.name + '<\/td>' +
	                    '<td class="file_upload_progress"><div><\/div><\/td>' +
	                    '<td class="file_upload_cancel">' +
	                    '<div class="ui-state-default ui-corner-all ui-state-hover" title="Cancel">' +
	                    '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
	                    '<\/div><\/td><\/tr>');
	        },
	        buildDownloadRow: function (file) {
	            return $('<tr><td><img alt="Photo" width="140" src="' + file.pic_path + '">' + '<\/td><\/tr>');
	        },
					onComplete: function (event, files, index, xhr, handler) { 
							$.ajax({
								type: "GET",
								url: "/remote/show_pic/",
								success: function(data){
									       cropping_arrived();
								         }
								});
					}
	    });
	});

    function  buttonClick(){
        document.getElementById("test_name").value=document.getElementById("tt").innerHTML;
    }


</script>
<% end %>

<table width="400" border="0" align="center" cellspacing="0">
  <tr>
    <td colspan="2"><div class="download_files" id="tt" contentEditable = "true" value ="dffdd">fffff打算</div></td>
  </tr>
  <tr>
    <td><div class="files">
	<%= form_for @upload, :html => { :class => "upload", :multipart => true } do |f| %>
          <%= f.file_field :picture %>
          <div>Upload files</div>
	<% end %>
	<table class="upload_files"></table>
    </div></td>
    <td>
      <%= form_for(@test) do |f| %>
          <% if @test.errors.any? %>
              <div id="error_explanation">
                <h2><%= pluralize(@test.errors.count, "error") %> prohibited this test from being saved:</h2>
                <ul>
                  <% @test.errors.full_messages.each do |msg| %>
                      <li><%= msg %></li>
                  <% end %>
                </ul>
              </div>
          <% end %>
          <div class="field">
            <%= f.text_area :name,:style=>"display:none" %>
            <div id="editor">
              <span class="button" title="insertimage" id="image" unselectable="on"  onclick="getValue()">图像</span>
            </div>
          </div>

          <div class="actions">
            <%= f.submit "提交", :onclick => "return buttonClick();" %>
          </div>
      <% end %></td>
  </tr>
</table>

